<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-primary text-white" height-hint="98">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
          </q-avatar>
          Title
        </q-toolbar-title>

        <q-btn flat round dense :icon="theme" @click="toggleTheme" />
      </q-toolbar>

      <q-tabs align="left" v-model="tab">
        <q-tab name="Form" label="Form" />
        <q-tab name="Table" label="Table" />
      </q-tabs>
    </q-header>

    <q-drawer
      show-if-above
      v-model="leftDrawerOpen"
      side="left"
      behavior="desktop"
      bordered
    >
      <!-- drawer content -->
    </q-drawer>

    <q-page-container>
      <KeepAlive>
        <component :is="tabs[tab]"></component>
      </KeepAlive>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref } from "vue";
import AppForm from "./AppForm.vue";
import AppTable from "./AppTable.vue";

import { useQuasar } from "quasar";

const $q = useQuasar();

const leftDrawerOpen = ref(false);

const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};

const tab = ref("Form");
const tabs = {
  Form: AppForm,
  Table: AppTable,
};

const theme = ref("light_mode");

const toggleTheme = () => {
  theme.value = theme.value === "light_mode" ? "dark_mode" : "light_mode";

  $q.dark.toggle();
};
</script>
